<template>
    <div ref="navbar" class="my-navbar">
        <div class="my-navbar-links">
            <div :class="$store.state.verb.current_page == 'home' ? 'my-menu-item my-active' : 'my-menu-item'" >
                <router-link class="my-router my-router-link" :to="{name: 'home'}">首页</router-link>
            </div>
            <div :class="$store.state.verb.current_page == 'LabProfile' ? 'my-menu-item my-active' : 'my-menu-item'">
                <router-link class="my-router my-router-link" :to="{name: 'LabIntroduction'}">本室概况</router-link>
                <ul class="my-dropdown">
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'LabIntroduction'}">实验室简介</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'OrganizationalStructure'}">组织架构</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'CurrentLeadership'}">现任领导</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'AcademicCommittee'}">学术委员会</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'HighlevelTalents'}">高层次人才</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'HistoryChange'}">历史沿革</router-link>
                    </li>
                </ul>
            </div>
            <div :class="$store.state.verb.current_page == 'TalentTeam' ? 'my-menu-item my-active' : 'my-menu-item'">
                <router-link class="my-router my-router-link" :to="{name: 'AcademicDirectionLeader'}">人才队伍</router-link>
                <ul class="my-dropdown">
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'AcademicDirectionLeader'}">学术方向带头人</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'professor'}">教授</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'AssociateProfessor'}">副教授</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'lecturer'}">讲师</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'ForeignTeacher'}">外籍教师</router-link>
                    </li>
                </ul>
            </div>
            <div :class="$store.state.verb.current_page == 'ScientificResearch' ? 'my-menu-item my-active' : 'my-menu-item'">
                <router-link class="my-router my-router-link" :to="{name: 'ResearchArea'}">科学研究</router-link>
                <ul class="my-dropdown">
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'ResearchArea'}">研究领域</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'ResearchDirection'}">研究方向</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'ResearchResults'}">科研成果</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'ResearchProgress'}">研究进展</router-link>
                    </li>
                </ul>
            </div>
            <div :class="$store.state.verb.current_page == 'AcademicExchange' ? 'my-menu-item my-active' : 'my-menu-item'">
                <router-link class="my-router my-router-link" :to="{name: 'AcademicExchangeSubpage'}">学术交流</router-link>
            </div>
            <div :class="$store.state.verb.current_page == 'CollaborativeInnovation' ? 'my-menu-item my-active' : 'my-menu-item'">
                <router-link class="my-router my-router-link" :to="{name: 'CollaborativeInnovationSubpage'}">协同创新</router-link>
            </div>
            <div :class="$store.state.verb.current_page == 'PartyBuilding' ? 'my-menu-item my-active' : 'my-menu-item'">
                <router-link class="my-router my-router-link" :to="{name: 'PartyBuildingSubpage'}">党建工作</router-link>
            </div>
            <div :class="$store.state.verb.current_page == 'TalentCultivation' ? 'my-menu-item my-active' : 'my-menu-item'">
                <router-link class="my-router my-router-link" :to="{name: 'admission'}">人才培养</router-link>
                <ul class="my-dropdown">
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'admission'}">招生工作</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'PostgraduateTraining'}">研究生培养</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'GraduateManagement'}">研究生管理</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'FundingAward'}">资助奖励</router-link>
                    </li>
                </ul>
            </div>
            <div :class="$store.state.verb.current_page == 'PublicServices' ? 'my-menu-item my-active' : 'my-menu-item'">
                <router-link class="my-router my-router-link" :to="{name: 'SystemDocuments'}">公共服务</router-link>
                <ul class="my-dropdown">
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'SystemDocuments'}">制度文件</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'RecruitmentInformation'}">招聘信息</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'MaterialDownload'}">资料下载</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'ContactUs'}">联系我们</router-link>
                    </li>
                </ul>
            </div>
            <div :class="$store.state.verb.current_page == 'ProvincialHome' ? 'my-menu-item my-active' : 'my-menu-item'">
                <router-link class="my-router my-router-link" :to="{name: 'StudentActivity'}">省重家园</router-link>
                <ul class="my-dropdown">
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'StudentActivity'}">学生活动</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'StudentAward'}">学生获奖</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'StudentEmployment'}">学生就业</router-link>
                    </li>
                    <li class="my-dropdown-item">
                        <router-link class="my-router-link" :to="{name: 'other'}">其他</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';

const store = useStore();
const navbar = ref(null); // 通过 ref 获取 nav 元素

onMounted(() => {
    const navbarHeight = navbar.value.offsetHeight; // 获取导航栏的高度
    window.addEventListener('scroll', () => {
        if (navbar.value) {
            // 判断当前滚动位置
            const scrollPosition = window.scrollY;
            if (scrollPosition >= navbarHeight) { 
                // 滚动超过导航栏高度时固定导航栏
                navbar.value.classList.add('fixed');
                store.commit("updateIsFixed", true);

            } else {
                // 如果滚动回顶部，移除固定样式
                navbar.value.classList.remove('fixed');
                store.commit("updateIsFixed", false);
            }
        }
    });
});
</script>

<style scoped>

.my-router-link {
    text-decoration: none !important;
    color: inherit !important;
    white-space: normal; /* 允许文字自动换行 */
}

/* 顶部导航栏整体样式 */
.my-navbar {
    width: 100%; /* 使导航栏占据整个屏幕宽度 */
    display: flex;
    justify-content: center; /* 水平居中内容 */
    align-items: center; /* 垂直居中内容 */
    background-color: #005aa0;
    color: white;
    height: 60px;
    position: relative; /* 初始相对定位 */
    transition: top 0.3s ease; /* 过渡效果，平滑过渡到顶部 */
}

/* 固定导航栏的样式 */
.fixed {
    position: fixed; /* 固定定位 */
    top: 0; /* 距离顶部为0 */
    left: 0;
    z-index: 1000; /* 确保导航栏在其他内容之上 */
    width: 100%; /* 保证宽度为100% */
}

/* 主菜单样式 */
.my-navbar-links {
    list-style: none;
    display: flex;
}

.my-menu-item {
    position: relative; /* 确保子菜单相对于父菜单定位 */
    padding: 0 25px; /* 左右内边距，避免文字紧贴边缘 */
    height: 60px; /* 让标题高度占满整个navbar */
    display: flex;
    align-items: center; /* 垂直居中标题文字 */
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}

/* 鼠标悬停父菜单效果 */
.my-menu-item:hover {
    background-color: #3AA0BD;
}

/* 隐藏下拉菜单 */
.my-dropdown {
    display: none;
    position: absolute;
    top: calc(100%); /* 子菜单与父菜单项间隔 */
    left: 0;
    background-color: white;
    color: #6B7474;
    list-style: none;
    padding: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    z-index: 1000;
    width: 100%;
    font-size: 16px;
}

/* 下拉菜单显示逻辑 */
.my-menu-item:hover .my-dropdown {
    display: block; /* 鼠标悬停时显示子菜单 */
}

/* 下拉菜单项样式 */
.my-dropdown-item {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 使子元素按列排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    text-align: center; /* 文本居中对齐 */
    padding: 10px;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    word-wrap: break-word; /* 自动换行 */
    user-select: none;
}

/* 鼠标悬停子菜单项样式 */
.my-dropdown-item:hover {
    background-color: #f5f5f5; /* 子菜单悬停时背景色 */
    color: #3AA9D4; /* 子菜单悬停时文字颜色 */
    font-weight: bold;
}

/* 去掉最后一个子菜单项的分隔线 */
.my-dropdown-item:last-child {
    border-bottom: none;
}

/* 当前激活的菜单项 */
.my-active {
    background-color: #3AA0BD;
}

.my-router {
    font-size: 21px;
    white-space: nowrap;
    user-select: none;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .my-menu-item {
        padding: 0 15px; /* 减少左右间距 */
    }

    .my-router {
        font-size: 16px;
    }

    .my-dropdown {
        font-size: 14px;
    }
}

@media (max-width: 992px) {
    .my-menu-item {
        padding: 0 12px; /* 再次减少左右间距 */
    }

    .my-router {
        font-size: 14px;
    }

    .my-dropdown {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .my-menu-item {
        padding: 0 10px; /* 进一步减小间距 */
    }

    .my-router {
        font-size: 12px;
    }

    .my-dropdown {
        font-size: 10px;
    }
}

@media (max-width: 576px) {
    .my-menu-item {
        padding: 0 5px; /* 最小化间距 */
    }

    .my-router {
        font-size: 10px;
    }

    .my-dropdown {
        font-size: 8px;
    }
}

</style>
